<template>
	<view class="page-container">
		<!-- 商品图片 -->
		<view class="milk-tea">
			<image src="/src/static/images/banner4.png" mode="widthFix" class="tea"></image>
		</view>

		<!-- 商品详情 -->
		<view class="product-detail">
			<view class="commodity-name">
				生椰拿铁
			</view>
			<view class="detail-text">
				<view class="detail-item">
					添加泰国丹嫩沙多香椰水，搭配绵密低脂椰云顶，低脂低能量，轻盈轻负担，古茗年度咖啡重磅登场，直接饮用风味更佳噢!香椰水x生椰乳x椰云顶，一口品鉴三重椰香!
				</view>
				<view class="detail-material">
					IIAC金奖咖啡豆椰子水生椰乳 椰云顶*可免费升级IIAC铂金奖咖啡豆
				</view>
			</view>
		</view>

		<!-- 口味选择 -->
		<view class="taste-box">
			<view class="taste">
				口味选择
			</view>
			<view class="price">杯￥18</view>
			<view class="variety">
				<view class="variety-text">金奖豆</view>
				<view class="variety-text">铂金豆</view>
			</view>
			<view class="temperature">
				<view class="temperature-text">正常冰</view>
				<view class="temperature-text">热</view>
				<view class="temperature-text">少冰</view>
			</view>
			<view class="sweetness">
				<view class="sweetness-text">正常糖</view>
				<view class="sweetness-text">七分糖</view>
				<view class="sweetness-text">五分分糖</view>
			</view>

			<!-- 加入购物车 -->
			<view class="product-container">
				<!-- 价格及数量区域 -->
				<view class="price-quantity">
					<view class="price-info">
						<text class="current-price">¥9.9 到手价</text>
						<text class="original-price">¥13.9 ¥19</text>
					</view>
					<view class="quantity-control">
						<button class="quantity-btn" @click="decreaseQuantity">-</button>
						<text class="quantity">{{ count }}</text>
						<button class="quantity-btn" @click="increaseQuantity">+</button>
					</view>
				</view>
				<!-- 加入购物车按钮 -->
				<button class="add-cart-btn" @click="addToCart">加入购物车</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 1, // 商品数量
				productId: 'product_001', // 商品ID（假设）
				selectedOptions: {
					variety: '金奖豆',
					temperature: '正常冰',
					sweetness: '正常糖'
				}
			};
		},
		onLoad(options) {
			// 页面加载时执行的逻辑
			// 可获取路由参数，如商品ID等
			if (options.productId) {
				this.productId = options.productId;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 减少数量
			decreaseQuantity() {
				if (this.count > 1) {
					this.count--;
				}
			},
			// 增加数量
			increaseQuantity() {
				this.count++;
			},
			// 加入购物车逻辑
			addToCart() {
				// 收集选择的商品信息
				const cartItem = {
					productId: this.productId,
					name: '生椰拿铁',
					price: 9.9,
					count: this.count,
					options: this.selectedOptions
				};

				uni.showToast({
					title: '加入购物车成功',
					icon: 'success'
				});

				// 实际项目中可调用接口或操作本地存储
				// 示例：存储到本地存储
				this.saveToCart(cartItem);
			},
			// 保存到购物车（示例方法）
			saveToCart(item) {
				try {
					// 获取本地购物车数据
					let cart = uni.getStorageSync('cart') || [];
					// 检查是否已有该商品（简化处理，实际应根据ID判断）
					const index = cart.findIndex(c => c.productId === item.productId);

					if (index > -1) {
						// 已存在则增加数量
						cart[index].count += item.count;
					} else {
						// 不存在则添加新商品
						cart.push(item);
					}

					// 保存到本地存储
					uni.setStorageSync('cart', cart);
				} catch (e) {
					console.error('保存购物车失败', e);
				}
			}
		}
	};
</script>

<style scoped>
	/* 页面容器 */
	.page-container {
		width: 100%;
		background-color: #f8f8f8;
	}

	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 20rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
	}

	.back-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 40% !important;
	}

	/* 商品图片样式 */
	.milk-tea {
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tea {
		width: 90%;
		height: 80%;
		max-height: 260rpx;
	}

	/* 商品详情样式 */
	.product-detail {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.commodity-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.detail-item,
	.detail-material {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	.detail-material {
		margin-top: 10rpx;
		color: #999;
	}

	/* 口味选择样式 */
	.taste-box {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.taste {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.price {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #000000;
		color: #ffffff;
		border-radius: 25rpx;
		font-size: 24rpx;
	}

	.variety,
	.temperature,
	.sweetness {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.variety-text,
	.temperature-text,
	.sweetness-text {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #f5f5f5;
		border-radius: 25rpx;
		font-size: 24rpx;
	}

	.variety-text {
		width: 49%;
	}

	.temperature-text,
	.sweetness-text {
		width: 32%;
	}

	/* 购物车相关样式 */
	.product-container {
		padding: 30rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.price-quantity {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.price-info {
		display: flex;
		flex-direction: column;
	}

	.current-price {
		font-size: 32rpx;
		color: #e54d42;
		font-weight: bold;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-top: 5rpx;
	}

	.quantity-control {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 4rpx;
		background-color: #fff;
		font-size: 36rpx;
		padding: 0;
	}

	.quantity {
		margin: 0 20rpx;
		font-size: 32rpx;
	}

	.add-cart-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #333;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		border: none;
	}
</style>